<template>
  <div>
<!--     今日推荐-->
    <el-card style="text-align: left">
      <div slot="header">
        <span style="font-size: 24px">今日推荐</span>
      </div>
      <div style="text-align: center">
        <div v-for="file in datas1" :key="file.id" style="display: inline-block; height: 150px; width: 120px; margin: 20px">
          <a :href="file.fileUrl" style="text-decoration: none; color: #303133">
            <img :src="file.fileIcon" width="100%" height="80%">
            <span style="font-size: 18px">{{file.nickName}}</span>
          </a>
        </div>
      </div>
    </el-card>
<!--    高点击数-->
    <el-card style="text-align: left">
      <div slot="header">
        <span style="font-size: 24px">高点击数</span>
      </div>
      <div style="text-align: center">
        <div v-for="file in datas2" :key="file.id" style="display: inline-block; height: 150px; width: 120px; margin: 20px">
          <a :href="file.fileUrl" style="text-decoration: none; color: #303133">
            <img :src="file.fileIcon" width="100%" height="80%">
            <span style="font-size: 18px">{{file.nickName}}</span>
          </a>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import Carousel from "@/components/Carousel";
export default {
  name: "FileBody",
  components: {Carousel},
  props: ["fileType"],
  data() {
    return {
      datas1: [],
      datas2: [],
    }
  },
  created() {
    this.loadData1();
    this.loadData2();
  },
  methods: {
    loadData1() {
      this.request.get("/u/pageByType", {
        params: {
          pageNum: 1,
          pageSize: 12,
          fileType: this.fileType
        }
      }).then(res => {
        if (res.code == 200) {
          this.datas1 = res.data.records;
        }
      });
    },
    loadData2() {
      this.request.get("/u/pageByType", {
        params: {
          pageNum: 1,
          pageSize: 12,
          fileType: this.fileType
        }
      }).then(res => {
        if (res.code == 200) {
          this.datas2 = res.data.records;
        }
      });
    },
  }
}
</script>

<style scoped>

</style>
